<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/include/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>统一用户授权管理系统</title>
<%@ include file="/include/header.jsp" %>
<%@ include file="/include/zTree.jsp" %>
</head>
<body style="background-color: white;">
	<div>
		<div class="b_box">
		<div class="p_bar"></div>
		<div class="ch_panel">
	        <div class="clearfix">
	          <form id="sysUserForm"  action="post">
	             <input type="hidden" name="CSRFToken" value="${csrfToken}" />
				 <table class="c_table">
				 	<tr>
				 		<td width="150" class="t_r"><b><i class="square"></i>用户名称：</b></td>
				 		<td width="170"><input class="input_txt" type="text" id="username" name="username" value="" data-validaterole="username" data-rule="username" style="width: 150px"/><i class="look"></i></td>
				 		<td width="120" class="t_r"><b><i class="square"></i>中文名称：</b></td>
				 		<td><input class="input_txt" type="text" id="userCnName" name="userCnName" value="" data-validaterole="userCnName" data-rule="userCnName" style="width: 150px"/></td>
				 	</tr>
				 	<tr>
				 		<td class="t_r"><b><i class="square"></i>身份证号：</b></td>
				 		<td><input class="input_txt" type="text" id="idCardNo" name="idCardNo" value=""  style="width: 150px"/></td>
				 		<td class="t_r"><b><i class="square"></i>密&nbsp;&nbsp;码：</b></td>
				 		<td><input class="input_txt" type="password" id="password" name="password" value="123456" data-validaterole="password" data-rule="password" readonly="readonly"  style="width: 150px"/> </td>
				 	</tr>
				 	<tr>
				 		<td class="t_r"><b><i class="square"></i>手&nbsp;&nbsp;机：</b></td>
				 		<td><input class="input_txt" type="text" id="mobile" name="mobile" value="" style="width: 150px"/></td>
				 		<td width="120" class="t_r"><b><i class="square"></i>电&nbsp;&nbsp;话：</b></td>
				 		<td><input class="input_txt" type="text" id="phone" name="phone" value="" style="width: 150px"/></td>
				 	</tr>
				 	<tr>
				 	    <td class="t_r"><b><i class="square"></i>邮&nbsp;&nbsp;箱：</b></td>
				 		<td><input class="input_txt" type="text" id="email" name="email" value="" /></td>
				 		<td class="t_r"><b><i class="square"></i>状&nbsp;&nbsp;态：</b></td>
				 		<td>
				 			<select  id="status" name="status" class="input_txt" style="width:155px;">
				 				<c:forEach items="${statusMap}" var="var">
				 					<option value="${var.key}">${var.value}</option>
				 				</c:forEach>
				 	        </select> 
				 	     </td>
				 	</tr>
				 	<tr>
				 	    <td class="t_r"><b><i class="square"></i>地&nbsp;&nbsp;址：</b></td>
				 		<td><input class="input_txt" type="text" id="address" name="address" value="" /></td>
				 	</tr>
				 	<tr>
						<td class="t_r"><b><i class="square"></i>所属部门：</b></td>
						<td colspan="3"><textarea name="deptName" id="deptName" class="input_txt" style="height:60px;width: 450px" readonly="readonly" data-validaterole="deptName" data-rule="deptName" ></textarea>
                         	<input type="hidden" name="deptId" id="deptId"/>
				        </td>
				        <div id="menuContent" class="menuContent"  style="display:none; position: absolute;background-color: white;z-index: 1">
							<ul id="treeDemo" class="ztree"></ul>
						</div>
					</tr>
				 	<tr>
				 		<td class="t_r"><b><i class="square"></i>注&nbsp;&nbsp;释：</b></td>
				 		<td colspan="3"><textarea id="remark" name="remark" class="input_txt" style="height:60px;width: 450px"></textarea></td>
				 	</tr>
				 </table>
			 </form>
			</div>
	      </div>
		
	 </div>
   	<div class="action_box m_t10 t_c"><input type="button" class="a_btn" value="保存" id="addBtn"/></div>
	</div>
	<script type="text/javascript">
		$(function(){
			
			// 验证
			seajs.use(["component/validate","component/tip"], function (validate,tip) {
				var ntip = function(){
					// 定义一个提示对象
					var t = new tip({
						content: 'hello tip',
						hasArrow: true,
						arrowOption: { dir: "left", position: { top:8 } },
						con: "body",
						hasCloseBtn: false,
						position: { my: "center", at: "center", of: "#tipcon" },
						css: { width: "20" }
					});
					return t;	
				};
			         	
				// 定义一个验证对象
				var d = new validate({
					con : "#sysUserForm",// 验证容器
					// 验证容器
					ntip: ntip,
					onSubmit : "#addBtn"// 提交按钮
				});
				// 设置拼装规则
				d.setValidateRule({ username : ["isBlank"] });
				d.setValidateRule({ password : ["isBlank"] });
				d.setValidateRule({ userCnName : ["isBlank"] });
				d.setValidateRule({ deptName : ["isBlank"] });
				d.setValidateRule({ mobile : ["isPhone"] });
				// 绑定提交按钮
				d.bind("onsubmit",function(){
					var serializedForm = $("#sysUserForm").serialize();
					 $.post("${ctx}/sysUser/add", serializedForm, function (result) {
			            if ("succ" == result) {
			    			alert("操作成功");
							parent.replaceByUrl('${ctx}/sysUser/list');
							parent.layerClose(window.name);
			            }else {
			            	alert(result);
			            }
			        }, "json");
				});
			});	
				
		});
	</script>

	<script type="text/javascript">
	//异步验证用户名不能为空
	$("#username").blur(function(){
	    var userName=$(this).val();
	    userName&&$.post("${ctx}/sysUser/isExistsUserName", {userName:userName}, function (result) {
	    	if("true"==result) {
	    		 alert("用户名已经存在");
	    	}
   	 	},"json");
    	
	});
	//异步验证身份证不能为空
	$("#idCardNo").blur(function(){
	    var idCardNo=$(this).val();
	    idCardNo&&$.post("${ctx}/sysUser/isExistsIdCardNo", {idCardNo:idCardNo}, function (result) {
	    	if("true"==result) {
	    		 alert("身份证号已经被使用");
	    	}
   	 	},"json");
    	
	});
	</script>
	
	<!--部门机构树状结构 -->
	<script type="text/javascript">
		//点击初始化树结构
		$(function(){
			$("#deptName").click(function(){
				showNewMenu();
			});
		});
		
		function showNewMenu(){
			initTree();
			showMenu();
		}
		
		function showMenu() {
			var cityObj = $("#deptName");
			var cityOffset = $("#deptName").offset();
			$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
			$("body").bind("mousedown", onBodyDown);
		}
		
		function hideMenu() {
			$("#menuContent").fadeOut("fast");
			$("body").unbind("mousedown", onBodyDown);
		}
		
		function onBodyDown(event) {
			if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
				hideMenu();
			}
		}
		
		function onClick(e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			nodes = zTree.getSelectedNodes();
			if(nodes.length > 0) {
				$("#deptName").val(nodes[0].name);
				$("#deptId").val(nodes[0].id);
			}
			hideMenu();
		}
		
		function onCheck(e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			nodes = zTree.getCheckedNodes(true);
			var deptNameObj = $("#deptName");
			var deptIdObj = $("#deptId");
		    var ids="";
		    for (var i = 0; i < nodes.length; i++) {
		      		ids += nodes[i].id+",";
		  	}
		    var names="";
		    for (var i = 0; i < nodes.length; i++) {
		    	names += nodes[i].name+",";
		  	}
		    deptNameObj.attr("value",names);
			deptIdObj.attr("value",ids);
		}
		
	    function initTree(){
			var setting = { 
				data: { 
					simpleData: { 
						enable: true 
					} 
				} ,
				view:{showLine:false},
				check:{
			    	enable: true,
			    	chkboxType:{ "Y" : "", "N" : "" }
				},
				async: { 
					enable: true, 
					url:"${ctx}/sysDept/deptTree",
					autoParam:["id"], 
					dataType: "json"
				},
				callback:{ 
					asyncError: zTreeOnAsyncError, //加载错误回调方法
					//onClick:onClick, //点击触发回调方法	
					onCheck:onCheck //选中回调方法
				}
			}; 
			function zTreeOnAsyncError(event, treeId, treeNode){ 
				alert("异步加载失败!"); 
			} 

			$.fn.zTree.init($("#treeDemo"),setting);
			zTree = $.fn.zTree.getZTreeObj("treeDemo");
		}
	    initTree();
	    
	</script>
</body>
</html>